<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任务一：零基础HTML及CSS编码</title>
    <style>
        body,p,h1{
            margin: 0;
        }
        img {
            height: 240px;
        }
        h3,span.text{
            color:#5e5e5e;
        }
        body{
            background-color: #eeeeee;
        }
        section{
            margin:30px 30px;
            padding:20px;
            background-color: #fff;
            border-top: 1px solid #e3e3e3;
            border-left: 1px solid #e3e3e3;
            box-shadow: 3px 3px 3px #5e5e5e;
        }
        .header{
            height:60px;
            width:100%;
            background-color: #333;
        }
        .logo-name{
            font-size:24px;
            color: #fff;
            line-height:50px;
            margin-left: 10px;
        }
        .text-right{
            float:right;
        }
        ul.menu{
            position: relative;
            right:20px;
            list-style: none;
            margin: 0;
            padding: 0;
            line-height:50px;
        }
        ul.menu > li{
            height:58px;
            width:100px;
            float:left;
            text-align: center;
            margin-left:30px;
        border-bottom:4px solid transparent;
        }

        ul.menu > li:hover{
        background-color: #888;
        border-bottom-color: #00a0e9;
            padding: 0 3px;

        }
        ul.menu > li a{
            color: #fff;
            text-decoration: none;
        }
        .pic-list {
            margin-left: 30px;
        }
        .pic-item{
            border:1px solid #5e5e5e;
            width: 300px;
            height:300px;
            text-align: center;
            margin-bottom: 15px;
        }
        .pic-item p{
            margin: 10px 0;
        }
        .pic-item img{
            vertical-align:middle
        }

        .list-none-style{
            list-style: none;
        }
        .text-strong{
            font-weight: bold;
        }

        table{
            display: inline-table;
            width:100%;
            border-collapse:collapse;
            border:1px solid #ddd;
            padding: 3px;
        }
        thead{
            display: table-header-group;
            border-color: inherit;
            vertical-align: middle;
        }
        table th{
            border:1px solid #ddd;
            background-color: #2d3e4d;
            color: #fff;
        }
        table tr{
            background-color: #fff;
            border-top:1px solid #ccc;
        }
        table td{
            border: 1px solid #ddd;
            padding: 6px 13px;
        }
        table tr.total{
            background-color: #d4d4d4;
            font-weight: bold;
        }

        .sidebar-title{
            font-size:18px;
            border-left:3px solid #ddd;
            padding-left:10px;
            height:40px;
            line-height:40px;
        }

        .form-content{
            text-align: center;
            width: 100%;
        }
        .col-4{
            float: left;
            width:40%;
        }
        .col-6{
            float: left;
            width:60%;
        }
        .col-12{
            width:100%;
        }
        .pull-right{
            text-align: right;
        }
        .pull-left{
            text-align: left;
        }
        .form-control{
            display: inline-block;
        }
        .row{
            position: relative;
            display: block;
            margin-bottom: 15px;
        }
        .row:before{
            display: table;
            content: " ";
        }
        .row:after{
            display: table;
            content: " ";
            clear:both;
        }
        .form-info{
            color:#999;
        }
        .btn{
            padding:8px 13px;
            background-color: #00a0e9;
            color:#fff;
            border-radius: 10px;
            border:none;
        }

        footer {
            color:#fff;
            background-color: #333;
            height:240px;
            text-align: center;
            padding: 10px;
        }
    </style>
</head>

<body>

<div class="header">
    <span class="logo-name">百度前端技术学院</span>

    <ul class="menu text-right">
        <li><a href="http://ife.baidu.com/">导航链接一</a></li>
        <li><a href="http://ife.baidu.com/course/all">导航链接二</a></li>
        <li><a href="http://ife.baidu.com/note/list?isElite=1">导航链接三</a></li>
        <li><a href="##">导航链接四</a></li>
    </ul>
</div>
<section>
    <div>
        <h2>文章一级标题</h2>
        <h3>文章二级标题</h3>
        <span>文章作者</span>&nbsp;<span>文章发表时间</span>

        <div>
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了</br>
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。
        </div>
        <img src="../images/timg.jpg" alt="" width="20%"/>
        <div>
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了</br>
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。
        </div>
    </div>
</section>
<section>

    <div>
        <h2>另一篇文章一级标题</h2>
        <h3>文章二级标题</h3>
        <span class="text">文章作者</span>&nbsp;<span class="text">文章发表时间</span>
        <div>
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了</br>
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。
        </div>
        <img src="../images/timg.jpg" alt="" width="20%"/>
        <div>
            <ul class="list-none-style">
                <li>项目列表一</li>
                <li>项目列表二</li>
                <li>项目列表三</li>
            </ul>
            <div>
                <h3>图片</h3>
                <div class="pic-list">
                    <div class="pic-item">
                        <p>好看的图片</p>
                        <img src="../images/timg.jpg" alt="" width="250px"/>
                    </div>
                    <div class="pic-item">
                        <p>好看的图片</p>
                        <img src="../images/timg.jpg" alt="" width="250px"/>
                    </div>
                    <div class="pic-item">
                        <p>好看的图片</p>
                        <img src="../images/timg.jpg" alt="" width="250px"/>
                    </div>
                    <div class="pic-item">
                        <p>好看的图片</p>
                        <img src="../images/timg.jpg" alt="" width="250px"/>
                    </div>
                    <div class="pic-item">
                        <p>好看的图片</p>
                        <img src="../images/timg.jpg" alt="" width="250px"/>
                    </div>
                    <div class="pic-item">
                        <p>好看的图片</p>
                        <img src="../images/timg.jpg" alt="" width="250px"/>
                    </div>
                    <div class="pic-item">
                        <p>好看的图片</p>
                        <img src="../images/timg.jpg" alt="" width="250px"/>
                    </div>
                    <div class="pic-item">
                        <p>好看的图片</p>
                        <img src="../images/timg.jpg" alt="" width="250px"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section>
    <div>
        <h2>最后一篇文章一级标题</h2>
        <h3>最后一篇文章二级标题</h3>
        <span class="text">文章作者</span>&nbsp;<span class="text">文章发表时间</span>
        <div>
            <ul style="list-style:decimal" class="text-strong">
                <li>排名1</li>
                <li>排名2</li>
                <li>排名3</li>
            </ul>
            <p>下边是一个表格，border="1"</p>
            <table>
                <thead>
                <tr>
                    <th>表头</th>
                    <th>表头</th>
                    <th>表头</th>
                    <th>表头</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>单元格</td>
                    <td>单元格</td>
                    <td>单元格</td>
                    <td><a href="##">操作</a></td>
                </tr>
                <tr>
                    <td>单元格</td>
                    <td>单元格</td>
                    <td>单元格</td>
                    <td><a href="##">操作</a></td>
                </tr>
                <tr>
                    <td>单元格</td>
                    <td>单元格</td>
                    <td>单元格</td>
                    <td><a href="##">操作</a></td>
                </tr>
                <tr>
                    <td>单元格</td>
                    <td>单元格</td>
                    <td>单元格</td>
                    <td><a href="##">操作</a></td>
                </tr>
                <tr class="total">
                    <td colspan="2">总计</td>
                    <td colspan="2">10000</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</section>
<section>
    <div class="side">
        <p class="sidebar-title">这里以后是一个侧栏，这是侧栏的标题</p>
        <form action="/" class="form-content">
            <div class="row">
                <div class="form-control col-4 pull-right">
                    <label>请输入邮箱地址：</label>
                </div>
                <div class="form-control col-6 pull-left">
                    <input type="text" placeholder="这是一个文本输入框"/>
                    <br>
                    <span class="form-info">邮箱地址请按要求输入</span>
                </div>
            </div>
            <div class="row">
                <div class="form-control col-4 pull-right">
                    <label>请输入密码：</label>
                </div>
                <div class="form-control col-6 pull-left">
                    <input type="password" placeholder="这是一个文本输入框"/>
                </div>
            </div>
            <div class="row">
                <div class="form-control col-4 pull-right">
                    <label>请重复输入密码：</label>

                </div>
                <div class="form-control col-6 pull-left">
                    <input type="password" placeholder="这是一个文本输入框"/> <br>
                    <span class="form-info">密码请为6~16位英文数字</span>
                </div>
            </div>

            <div class="row">
                <div class="form-control col-4 pull-right">
                    <label>性别：</label>

                </div>
                <div class="form-control col-6 pull-left">
                    <input name="sex" type="radio" value="" checked/>男
                    <input name="sex" type="radio" value=""/>女
                </div>
            </div>

            <div class="row">
                <div class="form-control col-4 pull-right">
                    <label>城市：</label>

                </div>
                <div class="form-control col-6 pull-left">
                    <select name="city" id="">
                        <option value="beijing">北京</option>
                        <option value="guangzhou">广州</option>
                    </select>
                </div>
            </div>

            <div class="row">
                <div class="form-control col-4 pull-right">
                    <label>爱好：</label>

                </div>
                <div class="form-control col-6 pull-left">
                    <input type="checkbox" value="sport"/> 运动
                    <input type="checkbox" value="art"/> 艺术
                    <input type="checkbox" value="science"/> 科学
                </div>
            </div>
            <div class="row">
                <div class="form-control col-4 pull-right">
                    <label>个人描述：</label>

                </div>
                <div class="form-control col-6 pull-left">
                    <textarea style="width: 100%;height:60px;">这是一个多行输入框，请输入您的描述</textarea>
                </div>
            </div>
            <div class="row">
                <input type="button" value="确认提交" class="btn col-12"/>
            </div>

        </form>
    </div>
</section>
<footer>
    <p>版权所有&copy;</p><br>
</footer>
</body>
</html>